<template>
  <div class="order-box">
    <el-row
      class="order-title"
      type="flex"
      justify="space-between"
      align="center"
    >
      <ul class="order-menu">
        <li class="active">定额表管理</li>
      </ul>
    </el-row>

    <div class="order-main">
      <el-row
        class="top-box"
        type="flex"
        justify="space-between"
        align="center"
      >
        <div style="width: 360px">
          <el-form class="order-search" size="small" label-width="60px">
            <el-row type="flex">
              <el-form-item prop="org" label="工序">
                <el-select
                  v-model="q_params.gongxu"
                  clearable
                  @change="changeGx1"
                >
                  <el-option
                    v-for="item in gxOption"
                    :key="item.id"
                    :label="item['key_value']"
                    :value="item['key_value']"
                  />
                </el-select>
              </el-form-item>
              <el-form-item prop="pz" label="品种">
                <el-select
                  v-model="q_params.pz"
                  clearable
                  @change="getTableList"
                >
                  <el-option
                    v-for="(item, index) in pzOption1"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <div>
          <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            size="small"
            @click="openDialog('insert')"
            >新增定额</el-button
          >
          <el-button icon="el-icon-s-help" size="small" @click="importShow()"
            >导入定额</el-button
          >
          <el-button type="primary" icon="el-icon-help" size="small"
            >导出定额</el-button
          >
          <el-button
            icon="el-icon-remove-outline"
            size="small"
            @click="delOrder('', 'multiple')"
            >批量删除</el-button
          >
        </div>
      </el-row>
      <div class="common-table order-table" ref="table" v-loading="loading">
        <el-table ref="orderTable" :data="data" style="width: 100%">
          <el-table-column type="selection" width="40" align="center" />
          <el-table-column
            align="center"
            v-for="(item, index) in column"
            :key="item.prop || index"
            :prop="item.prop"
            :min-width="item.width"
            :label="item.label"
          >
            <template slot-scope="scope">
              <el-tag
                v-if="item.prop === 'status'"
                size="mini"
                class="table-tag"
                :type="scope.row.type"
                >{{ scope.row.status }}</el-tag
              >
              <template v-else>{{ scope.row[item.prop] }}</template>
            </template>
          </el-table-column>

          <el-table-column header-align="center" width="120px" align="center">
            <template slot="header" slot-scope="scope">操作</template>
            <template slot-scope="scope">
              <div class="bp">
                <el-button
                  type="text"
                  icon="el-icon-edit-outline"
                  @click="openDialog('update', scope.row, scope.column)"
                  size="mini"
                  >编辑</el-button
                >
              </div>
              <el-button
                slot="reference"
                type="text"
                icon="el-icon-delete"
                class="danger"
                size="mini"
                @click.stop="delOrder(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @current-change="currentChange"
            @size-change="sizeChange"
            :current-page.sync="q_params.current"
            :page-size.sync="q_params.size"
            layout="sizes, prev, pager, next"
            :total="q_params.total"
          />
        </div>
      </div>
    </div>
    <import-order :dialogVisible="importVisible" @close="importShow" />
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
      <el-form label-width="80px" :inline="true">
        <el-form-item label="工序">
          <el-select
            v-model="i_params.gongxu"
            placeholder="请选择工序"
            @change="changeGx2"
          >
            <el-option
              v-for="item in gxOption"
              :key="item.id"
              :label="item['key_value']"
              :value="item['key_value']"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="品种">
          <el-input v-model="i_params.pz"></el-input>
        </el-form-item>
      </el-form>
      <el-form label-width="80px" :inline="true">
        <el-form-item label="锭速">
          <el-input v-model="i_params.ds"></el-input>
        </el-form-item>
        <el-form-item label="锭量">
          <el-input v-model="i_params.dl"></el-input>
        </el-form-item>
      </el-form>
      <el-form label-width="80px" :inline="true">
        <el-form-item label="效率">
          <el-input v-model="i_params.xiaolv"></el-input>
        </el-form-item>
        <el-form-item label="车速">
          <el-input v-model="i_params.cs"></el-input>
        </el-form-item>
      </el-form>
      <el-form label-width="80px" :inline="true">
        <el-form-item label="台产">
          <el-input v-model="i_params.tc"></el-input>
        </el-form-item>
        <el-form-item label="计算">
          <el-input v-model="i_params.jisuan"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="isOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import importOrder from './basiclier/import';
import { queryQuota, deleteQuota, updateQuota, insertQuota } from '@/api/quota';
import { commonPz } from '@/api/common';
export default {
  components: {
    importOrder,
  },
  data() {
    return {
      dialogType: '',
      dialogTitle: '',
      dialogVisible: false,
      i_params: {
        gongxu: '',
        pz: '',
        ds: '',
        dl: '',
        xiaolv: '',
        cs: '',
        zl: '',
        tc: '',
        jisuan: '',
      },
      q_params: {
        gongxu: null,
        pz: null,
        page: 0,
        size: 10,
        total: 0,
      },
      search: {
        org: '',
        cj: '',
        pz: '',
        ddjq: '',
      },
      secLoading: false,
      mergeVisible: false,
      mergeIds: [],
      importVisible: false,
      data: [],
      column: [
        { prop: 'gongxu', label: '工序', width: '10%' },
        { prop: 'pz', label: '品种', width: '20%' },
        { prop: 'ds', label: '锭速', width: '10%' },
        { prop: 'dl', label: '锭量', width: '10%' },
        { prop: 'xiaolv', label: '效率', width: '10%' },
        { prop: 'cs', label: '车速', width: '10%' },
        { prop: 'zl', label: '重量', width: '10%' },
        { prop: 'tc', label: '台产', width: '10%' },
        { prop: 'jisuan', label: '计算', width: '10%' },
      ],
      pzOption1: [''],
      pzOption2: [],
    };
  },
  created() {
    this.getTableList();
  },
  mounted() {
    this.$nextTick(() => {
      this.getHeight();
    });
  },
  computed: {
    gxOption() {
      return this.$store.getters.gxOption;
    },
  },
  methods: {
    changeGx1(val) {
      this.q_params.pz = '';
      this.pzOption1 = [];
      this.getPz(val, '1');
      this.getTableList();
    },
    changeGx2(val) {
      this.i_params.pz = '';
      this.pzOption2 = [];
      this.getPz(val, '2');
    },
    async getPz(gongxu, id) {
      const res = await commonPz(gongxu);
      if (res.code == 1) {
        this['pzOption' + id] = res.data;
      }
    },
    async isOk() {
      console.log(this.i_params);
      this.dialogVisible = false;
      if (this.dialogType === 'insert') {
        await insertQuota(this.i_params);
      } else if (this.dialogType === 'update') {
        await updateQuota(this.i_params);
      }
      this.i_params = {
        gongxu: '',
        pz: '',
        ds: '',
        dl: '',
        xiaolv: '',
        cs: '',
        zl: '',
        tc: '',
        jisuan: '',
      };
      this.getTableList();
    },
    openDialog(type, row, column) {
      this.dialogVisible = true;
      if (type === 'insert') {
        this.dialogType = 'insert';
        this.dialogTitle = '新增定额';
      } else if (type === 'update') {
        this.dialogType = 'update';
        this.dialogTitle = '更新定额';
        this.i_params = row;
        console.log(row);
        console.log(column);
      }
    },
    async getTableList() {
      this.loading = true;
      const res = await queryQuota(this.q_params);
      if (res.code == 1 && res.data) {
        this.$nextTick(() => {
          this.loading = false;
        });
        this.data = res.data.dataList;
        this.q_params.total = res.data.total;
      } else {
        this.loading = false;
        this.data = [];
        this.page.total = 0;
      }
    },
    delOrder(id, type) {
      let ids = [];
      if (type == 'multiple') {
        let selection = this.$refs.orderTable.selection;
        if (selection.length > 0) {
          selection.map((item) => {
            ids.push(item.id);
          });
        } else {
          this.$message({
            message: '请选择需要删除的定额记录',
            iconClass: 'el-icon-warning',
            customClass: 'common-message',
          });
          return;
        }
      } else {
        ids = [id];
      }
      this.$confirm('确认删除该定额记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        const res = await deleteQuota({ array: ids });
        if (res.code == 1) {
          this.$message({
            message: '删除成功',
            iconClass: 'el-icon-success',
            customClass: 'common-message',
          });
          this.getTableList();
        }
      });
    },
    getHeight() {
      this.tableHeight = this.$refs.table.offsetHeight - 52;
    },
    importShow() {
      this.importVisible = !this.importVisible;
    },
    currentChange(current) {
      console.log('current');
      console.log(current);
      this.q_params.page = current;
      this.getTableList();
    },
    sizeChange(size) {
      console.log('size');
      console.log(size);
      this.q_params.size = size;
      this.getTableList();
    },
  },
};
</script>

<style lang="scss">
@import '~@/assets/css/order.scss';
.top-box {
  margin-bottom: 15px;
}
</style>
